<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片切换</title>
</head>
<body>
<img src="../images/img01.png" id="flower" height=200 weight=200><br>
<button id="prevbutn">上一张</button>
<button id="nextbutn">下一张</button>
<script type="text/javascript">
    let flower = document.getElementById("flower");
    let nextbutn = document.getElementById("nextbutn");
    let prevbutn = document.getElementById("prevbutn");
    let minImgCount=1,maxImgCount=5,temp=minImgCount;
    nextbutn.onclick = function () {
        if(temp === maxImgCount){
            temp=minImgCount;
        }else{
            temp++;
        }
        flower.setAttribute('src',`./images/img0${temp}.png`);
    }
    prevbutn.onclick = function () {
        if(temp === minImgCount){
            temp=maxImgCount;
        }else{
            temp--;
        }
        flower.setAttribute('src',`./images/img0${temp}.png`);
    }
</script>
</body>
</html>